<template>
	<view>
		
		<!-- 进行中 计划展开收起 按钮 -->
		<view class="plan_status" @click="isUnderwayShow = !isUnderwayShow">
			<text>进行中</text>
			<image :src="isUnderwayShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 进行中 计划展示列表 -->
		<view class="plan_item" v-for="item in underwayList" v-show="isUnderwayShow" 
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<!-- 计划进度条部分, 百分比数字显示 -->
			<view class="progress_outside">
				<!-- 进度条部分 -->
				<view class="progress">
					<cwg-progress :progress="item.progress"></cwg-progress>
				</view>
			
				<!-- 百分比部分 -->
				<view class="percent_text">
					{{item.progress + '%'}}
				</view>
			</view>
			
			<view class="plan_ddl">
				<view :style="{color: isPlanExpired(item.deadline) ? '#E24844': '#617FDE'}">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
		
		
		<!-- 已完成 计划展开收起 按钮 -->
		<view class="plan_status" @click="isCompleteShow = !isCompleteShow">
			<text>已完成</text>
			<image :src="isCompleteShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 已完成 计划展示列表 -->
		<view class="plan_item plan_complete_status" v-for="item in completeList" v-show="isCompleteShow"
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<!-- 计划进度条部分, 百分比数字显示 -->
			<view class="progress_outside">
				<!-- 进度条部分 -->
				<view class="progress">
					<cwg-progress :progress="item.progress"></cwg-progress>
				</view>
			
				<!-- 百分比部分 -->
				<view class="percent_text">
					{{item.progress + '%'}}
				</view>
			</view>
			
			<view class="plan_ddl">
				<view style="color: #000000">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import cwgProgress from '@/components/cwg-progress/cwg-progress.vue'

	export default {
		components: {
			cwgProgress
		},
		data() {
			return {
				
				
				// 计划列表部分开始
				isUnderwayShow: true,		// 进行中列表展示状态
				isCompleteShow: true,		// 已完成列表展示状态
				
				underwayList: [],			// 进行中的计划列表
				
				completeList: [],			// 已完成的计划列表
				
				
				
			};
		},
		onLoad() {
			
			
		},
		onShow() {
			this.getUnderwayList()
			this.getCompleteList()
		},
		methods: {
			// 获取进行中的计划列表
			getUnderwayList() {
				
				this.$http_json({
					url: "/api/plan/list",
					method: "get",
					loading: false,
					params: {
						isdone: false,
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)
					// todo
					this.underwayList = result.data
				})
			},
			// 获取已完成的计划列表
			getCompleteList() {

				this.$http_json({
					url: "/api/plan/list",
					method: "get",
					loading: false,
					params: {
						isdone: true,
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)
					// todo
					this.completeList = result.data
				})
			},
			// 判断计划是否过期
			isPlanExpired(timeInput) {
				let ddl = new Date(timeInput); 
				let now = Date.now();
				
				if((ddl-now) >= 0) {
					return false
				}else {
					return true
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.plan_status {
		background-color: #E7ECFD;
		color: #71737B;
		font-size: 24rpx;
		// font-weight: 700;
		padding: 14rpx 30rpx;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.plan_item {
		border-bottom: 2rpx solid #F1F1F1;
		padding: 0 30rpx;
		
		.plan_title {
			font-size: 30rpx;
			font-weight: bold;
			padding-top: 19rpx;
		}
		
		.progress_outside {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			padding-top: 19rpx;
		
			.progress {
				width: 100%;
			}
		
			.percent_text {
				padding-left: 44rpx;
				flex-shrink: 0;
				color: #617FDE;
				font-size: 24rpx;
			}
		}
		
		.plan_ddl {
			padding: 14rpx 0;
			color: #617FDE;
			font-size: 24rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.duration {
				background-color: #617FDE;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.plan_complete_status {
		opacity: 0.3;
	}
</style>
